<!--
 * @Descripttion: 库存查询列表
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-02 15:03:05
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-05 16:16:38
 -->
<template>
  <div class="app-container">
    <el-card shadow="never" class="oper-btn-card">
      <div class="clearfix">
        <b>供应商： {{ comegoName }}</b>
        <span class="margin-l20">应付欠款：{{ dataObj.receivable || 0 }}</span>
        <el-button class="fr" type="primary" @click="btnAddData">新增付款</el-button>
      </div>
    </el-card>
    <el-card shadow="never" class="oper-btn-card">
      <div class="clearfix">
        <div class="fr">
          <el-input
            v-model="searchData.keywords"
            clearable
            style="width: 300px"
            placeholder="按单号,备注查询."
            @keydown.enter.native="resetList"
          />
          <el-checkbox
            v-model="searchData.isShowCancle"
            true-label="0"
            false-label="1"
            border
          >不限制作废单据</el-checkbox>
          <el-button type="primary" @click="btnSearchData">查询</el-button>
          <el-button>筛选</el-button>
        </div>
      </div>
    </el-card>
    <vxe-grid
      ref="table"
      class="grid"
      border
      resizable
      highlight-hover-row
      show-footer
      :footer-method="footerMethod"
      footer-row-class-name="bg-gay"
      :loading="tableLoading.table"
      :edit-config="{trigger: 'click', mode: 'row'}"
      :columns="columnsData"
      :data="tableData.table"
    />
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="pageInfo.rows"
        :page-sizes="[20,30,40]"
        :current-page.sync="pageInfo.page"
        :total="pageInfo.total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { listDetailByComegoId as listData } from '@/api/finance/comego-pay-debt.js'
import { cancleBill } from '@/api/finance/comego-pay-bill.js'
import { getDebtById } from '@/api/bsd/supplier/supplier.js'
import Affix from '@/components/Affix'
import Tab from '@/views/components/Tab'
import { sunTableAmount, getBusinessTime } from '@/libs/util.js'
import { getDelButton } from '@/components/Table/oper-btns.js'

export default {
  name: 'ComegoDebtPaymentDetail',
  filters: {
  },
  // eslint-disable-next-line vue/no-unused-components
  components: { Tab, Affix },
  mixins: [oftenuse],
  props: {
    comegoId: {
      type: String,
      required: true
    },
    comegoName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      searchData: { comegoId: this.comegoId, isShowCancle: '0' },
      stockQuantity: {},
      columnsData: [
        { title: '序号', type: 'seq', width: 60, fixed: 'left', align: 'center',
          slots: {
            default: (params) => {
              const { row, seq } = params
              const { billCat, isCancleBill } = row
              const showOperBillCats = ['fin_comego_in', 'fin_comego_out']
              if (!showOperBillCats.includes(billCat)) return [seq]
              if (isCancleBill === '1') return [seq]
              const h = this.$createElement
              const delBtnNode = getDelButton(h, { on: { click: () => { this.btnDelData(row) } }})
              const divNode = h('div', {
                attrs: {
                  class: 'table-oper-btns'
                }
              }, [delBtnNode])
              return [divNode]
            }
          }
        },
        { field: 'businessTime', title: '业务日期', width: 120,
          slots: {
            default: ({ row }) => {
              const value = getBusinessTime(row.businessTime)
              return [value]
            }
          }
        },
        { field: 'billNo', title: '单据编号', fixed: 'left', width: 150 },
        { field: 'handUserName', title: '经手人', width: 100 },
        { field: 'billCatName', title: '业务类型', width: 100,
          slots: {
            default: ({ row }) => {
              const { billCatName, isCancleBill } = row
              if (isCancleBill === '1') {
                return [`作废${billCatName}`]
              }
              return [billCatName]
            }
          }
        },
        { field: 'amountDebt', title: '原单欠款', align: 'right', width: 100 },
        { field: 'amountRece', title: '付款额', align: 'right', width: 100 },
        { field: 'amountDiscount', title: '优惠额', align: 'right', width: 100 },
        { field: 'accountName', title: '结算账户', width: 120 },
        { field: 'amountReceivable', title: '应付欠款', align: 'right', width: 100 },
        { field: 'remainDebt', title: '结余欠款', align: 'right', width: 100 },
        { field: 'remarks', title: '备注', width: 150 }
      ]
    }
  },
  computed: {
    'dataRange': function() {
      const { beginTime, endTime } = this.searchData
      if (!beginTime || !endTime) {
        return `全部`
      }
      return `${beginTime} - ${endTime}`
    }
  },
  watch: {
  },
  created() {
    this.$set(this.searchData, 'comegoId', this.comegoId)
    this.initData()
  },
  methods: {
    btnDelData(row) {
      this.isAllowDel('确定要作废该单据吗？').then(_ => {
        const { id } = row
        this.cancleBill(id)
      })
    },
    btnAddData() {
      this.$router.push({
        name: 'ComegoDebtReceAdd'
      })
    },
    btnSearchData() {
      this.setBtnLoading('search', true)
      this.listData().then(res => {
        this.setBtnLoading('search', false)
      }).catch(err => {
        console.log(err)
        this.setBtnLoading('search', false)
      })
    },
    // table btns
    // api
    initData() {
      this.getDebtById()
      this.listData()
    },
    resetList() {
      this.searchData.current = 1
      this.listData()
    },
    listData(params = { data: this.searchData, page: this.pageInfo }) {
      this.setTableLoading('table', true)
      return new Promise((resolve, reject) => {
        listData(params).then(res => {
          this.setTableLoading('table', false)
          if (!res.data.flag) return
          const { records, total } = res.data.data
          this.setTableData('table', records)
          this.pageInfo.total = total
          resolve(res)
        }).catch(err => {
          this.setTableLoading('table', false)
          this.$notify.error({ title: '查询异常！', message: err.message })
          reject(err)
        })
      })
    },
    cancleBill(billId) {
      cancleBill(billId).then(res => {
        const message = res.data.message
        if (res.data.flag) {
          this.$notify.success(message)
        } else {
          this.$notify.error({ title: '作废失败！', message })
        }
      })
    },
    getDebtById() {
      const params = this.comegoId
      getDebtById(params).then(res => {
        if (!res.data.flag) return
        const data = res.data.data
        this.$set(this.dataObj, 'receivable', data)
      })
    },
    footerMethod({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '合计'
          }
          if (['amountDebt', 'amountRece', 'amountDiscount'].includes(column.property)) {
            return sunTableAmount(data, column.property)
          }
          if (['amountReceivable'].includes(column.property)) {
            let result = 0
            data.forEach(item => {
              const { amountDebt, amountRece, amountDiscount } = item
              const value = this.$amount(amountDebt).subtract(amountRece).subtract(amountDiscount).format()
              result = this.$amount(result).add(value).format()
            })
            return result
          }
          return null
        })
      ]
    },
    // on
    onSizeChange(val) {
      this.pageInfo.current = 1
      this.pageInfo.size = val
      this.listData()
    },
    onCurrentChange(val) {
      this.pageInfo.current = val
      this.listData()
    },
    onDateRange(data) {

    },
    onTabClick(data) {
    }
  }
}
</script>
<style lang="scss" scoped>
 .canuse-info{
     color: #636363;
     text-align: center;
     line-height: 26px;
     b { font-size: 24px;}
  }
</style>
